<template>
  <div class="list-wrapper">
    <h4 class="list-title">用户新增</h4>
    <form ref="user_add" action="" autocomplete="off" @submit.prevent="handleSubmit">
      <div class="form-item">
        <label for="user_img">用户头像</label>
        <div class="form-input avatar">
          <a href="javascript:;" class="avatar-img">
            <img :src="fileImg" width="90" height="90">
          </a>
          <input type="file" name="head_img" accept="image/*" class="hidden-input" id="user_img" :file-list="user_img" @change="handFile">
        </div>
      </div>
      <div class="form-item">
        <label for="user_account">用户名</label>
        <div class="form-input">
          <input type="text" name="user_account" placeholder="请输入用户名" id="user_account">
        </div>
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <div class="form-input">
          <input type="password" name="password" placeholder="请输入密码" id="password" pattern="[0-9A-Za-z]{6,16}" title="密码为6-16位数字或字母">
        </div>
      </div>
      <div class="form-item">
        <label for="nickname">用户昵称</label>
        <div class="form-input">
          <input type="text" name="nickname" placeholder="请输入昵称" id="nickname">
        </div>
      </div>
      <div class="form-item">
        <label>性别</label>
        <div class="form-input">
          <input type="radio" name="sex" value="男" checked>男
          <input type="radio" name="sex" value="女">女
        </div>
      </div>
      <div class="form-item">
        <label for="mobile_number">手机号</label>
        <div class="form-input">
          <input type="tel" name="mobile_number" placeholder="请输入手机号" id="mobile_number" pattern="(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|0])\d{8}" title="输入的手机号码不正确">
        </div>
      </div>
      <input type="hidden" name="del" :value="checkDel">
      <input type="hidden" name="token" :value="adminToken">
      <div class="form-item">
        <label></label>
        <div class="form-input">
          <input type="submit" value="确认新增">
        </div>
      </div>
    </form>
    <!--遮罩层-->
    <div id="popLayer" v-show="flag"></div>
    <!--弹出层-->
    <div id="popBox" v-show="flag">
      <div class="popBox-content">
        <p>确认新增用户信息？</p>
        <div class="pop-btn">
          <button @click="handleAddData">确认</button>
          <button @click="handleCancelBtn" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//头像实时显示
var fileInput=document.getElementById('user_img');
export default {
  name: "UserAdd",
  data(){
    return {
      flag:false,
      user_img:'',
      fileImg:"static/image/avatar.jpg",
      checkDel:0,
      adminToken:this.getCookie('adminToken')
    }
  },
  methods:{
    handleSubmit(){
      this.flag=true
    },
    handleCancelBtn(){
      this.flag=false
    },
    //新增用户
    handleAddData(){
      //请求列表数据
      this.$axios({
        url:'/user/doadd',data:new FormData(this.$refs.user_add),headers:{'content-type':'multipart/form-data'},method:'put'
      }).then(response=>{
        let res=response.data;
        if(res.state===200){
          this.$router.push('/admin/userlist')
        }
        else if(res.state===500){
          alert(res.msg);
          this.$router.push('/admin/login')
        }
        else{
          alert(res.msg);
        }
        this.flag=false;
      }).catch(error=>{
        console.log(error);
      })
    },
    handFile(e){
      let $target=e.target||e.srcElement;
      if(typeof $target.files[0] === 'undefined'){
        return;
      }
      let file=$target.files[0];
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload=data=>{
        this.fileImg=data.target.result;
      }
    }
  }
}
</script>

<style scoped>
@import "../../static/css/user_edit.css";
</style>
